<template>
    <el-select class="flex-select" :style="{ width: data.fullWidth ? '100%' : data.size === 'large' ? '14vw' : data.size === 'small' ? '6vw' : '8vw' }" :clearable="data.clearable || false" :placeholder="data.placeholder || '请选择'" v-model="form[data.paramKey]" >
        <el-option v-if="data.extraOption" :label="data.extraOption.label" :value="data.extraOption.key" />
        <el-option
            v-for="item in ( filterData || [] )"
            :key="item[data.labelKey || 'key']"
            :label="item[data.labelName || 'label']"
            :value="item[data.labelKey || 'key']"
        />
        <template v-if="data.hasSearch || ( data.hasPagination && total > pageInfo.pageSize ) "  #footer>

            <el-input v-if="data.hasSearch" class="flex-input" style="margin-bottom:var(--sPadding);" clearable  :placeholder="data.searchPlaceholder || '请输入设备类型查询'" v-model="val" @input="handleInput" />
            <el-pagination
                v-if="data.hasPagination && total > pageInfo.pageSize "
                class="flex-pagination"
                layout="prev, pager, next" 
                v-model:current-page="pageInfo.page" 
                v-model:page-size="pageInfo.pageSize" 
                :total="total" 
                @current-change="handleChangePage"
            ></el-pagination>
        </template>
    </el-select>
</template>
<script setup>
    import { ref, watch, reactive, onMounted, onUpdated } from 'vue';
    const timer = ref(null);
    const props = defineProps({
        form:{ type:Object },
        data:{ type:Object },
        payload:{ type:Array },
        total:{ type:Number, default:0 },
    });
    const emit = defineEmits(['search']);
    const pageInfo = reactive({ page:1, pageSize:10 });
    const filterData = ref([]);
    const val = ref('');    
    const fixName = props.data.labelName || 'label';
    function handleInput(){
        clearTimeout(timer.value);
        if ( props.data.searchType === 'remote' ) {
            // 远程筛选
            timer.value = setTimeout(()=>{
                emit('search', { [props.data.searchKey]:val.value });
            }, 500);
        } else {
            // 本地筛选      
            filterData.value = props.payload.filter(i=>i[fixName].includes(val.value));
        }
    }
    function handleChangePage(num){
        pageInfo.page = num;
        emit('search', pageInfo);
    }
    watch(()=>props.payload, ()=>{
        filterData.value = props.payload;
    }, { immediate:true })
</script>
<style lang="scss"> 
    .flex-select {
        width:8vw;
        .el-select__wrapper {
            padding:0 var(--sPadding);
            min-height:var(--baseHeight);
            line-height:var(--baseHeight);
            font-size:var(--baseFontSize);
            input {
                font-size:var(--baseFontSize);
                height:var(--baseHeight);
                line-height:var(--baseHeight);
            }
            .el-icon {
                height:var(--baseFontSize);
                line-height:var(--baseFontSize);
                width:var(--baseFontSize);
            }
        }
    }
</style>

